<template>
  <div id="app">
    <h2 class="text-center">学生管理系统</h2>
    <!-- 表单 -->
    <form @submit.prevent="addStudent">
      <div class="form-group">
        <label for="userName">用户</label>
        <input
          type="text"
          class="form-control"
          v-model="student.name"
          id="userName"
          placeholder="userName"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input
          type="password"
          class="form-control"
          v-model="student.password"
          id="exampleInputPassword1"
          placeholder="Password"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">邮箱</label>
        <input
          type="email"
          class="form-control"
          v-model="student.email"
          id="exampleInputEmail1"
          placeholder="email"
        />
      </div>

      <button type="submit" class="btn btn-success">添加</button>
      <!-- 没有指定 type 属性，表单中的<button> 会默认为 type="submit" -->
      <button @click="resetForm" class="btn btn-primary" type="button">
        重置
      </button>
    </form>

    <!-- 表格 -->
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>密码</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.password }}</td>
          <td>{{ student.email }}</td>
          <td>
            <button @click="editStudent(index)" class="btn btn-warning">
              编辑
            </button>
            <button @click="deleteStudent(index)" class="btn btn-danger">
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑学生信息">
      <el-form :model="currentStudent">
        <el-form-item label="编号">
          <el-input
            style="width: 50%"
            v-model="currentStudent.id"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input style="width: 50%" v-model="currentStudent.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            style="width: 50%"
            type="password"
            v-model="currentStudent.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            style="width: 50%"
            v-model="currentStudent.email"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateStudent">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import "@/assets/bootstrap.css";
const students = ref([]);
// 收集学生的表单数据
const student = ref({ name: "", password: "", email: "" });
const dialogVisible = ref(false);
const currentStudent = ref({ id: 0, name: "", password: "", email: "" });
function addStudent() {
  students.value.push({ ...student.value, id: students.value.length + 1 });
}

// 重置
function resetForm() {
  student.value.name = "";
  student.value.password = "";
  student.value.email = "";
}

// 删除
function deleteStudent(index) {
  students.value.splice(index, 1);
}

// 编辑
function editStudent(index) {
  // 被点击哪一行的学生数据
  const studentData = students.value[index];
  // 赋值存储
  currentStudent.value = { ...studentData };
  dialogVisible.value = true;
}

function updateStudent() {
  // 如果找到了id相等的数据
  const index = students.value.findIndex(
    (item) => item.id === currentStudent.value.id
  );
  if (index !== -1) {
    students.value[index] = { ...currentStudent.value };
  }
  dialogVisible.value = false;
}
</script>

<style lang="less">
form {
  width: 80vw;
  margin: 20px auto;
  .form-group {
    display: flex;
    align-items: center;

    label {
      width: 50px;
    }
  }
  button[type="submit"] {
    margin-left: 45px;
  }
}
table {
  width: 80vw !important;
  margin: auto;
  thead {
    font-weight: 900;
    background-color: rgb(222, 235, 247);
  }
  td {
    width: 20%;
  }
}
</style>
